<template>
  <div class="detail-wrapper">
    <detail-header></detail-header>
    <detail-banner
      :sightName="sightName"
      :bannerImage="bannerImage"
      :galleryImages="galleryImages"
    ></detail-banner> 
    <detail-list   
      :categoryList="categoryList"
    ></detail-list>
    <div class="content-box">
    </div>
  </div>
</template>

<script>
import DetailBanner from './components/Banner'
import DetailHeader from './components/Header'
import DetailList from './components/List'
import axios from 'axios'

export default {
  name: 'Detail11',
  components: {
    'detail-banner': DetailBanner,
    'detail-header': DetailHeader,
    'detail-list': DetailList
  },
  data: function() {
    return {
      lastId: undefined,
      sightName: '',
      bannerImage: '',
      galleryImages: [],
      categoryList: []
    }
  },
  methods: {
    getDetailInfo: function(routeParam) {
      // 如何拿到id, 通过路由里面的$route.params
      // axios.get('/api/detail.json?id=' + this.$route.params.id )
      // 第二种写法
      axios.get('./mock/detail.json', {
        params: {
          id: routeParam.id 
        }
      }).then(this.getDetailInfoSuccess)
    },
    getDetailInfoSuccess: function(res) {
      var resData = res.data;
      if (resData.ret && resData.data) {
        var data = resData.data;
        this.sightName = data.sightName;
        this.bannerImage = data.bannerImage;
        this.galleryImages = data.galleryImages;
        this.categoryList = data.categoryList;
      }
    }
  },
  mounted: function() {
    var paramObj = this.$route.params;
    this.lastId = paramObj.id;
    this.getDetailInfo(paramObj);
  },
  activated: function() {
    //首页进入这个详情页面时触发
    var paramObj = this.$route.params;
    if (this.lastId && (this.lastId !== paramObj.id)) {
      this.getDetailInfo(paramObj);
      this.lastId = paramObj.id;
    }

    // 还可以用在keep-alive标签上加 exclude的属性
    // <keep-alive exclude="Detail"></keep-alive>, Detail是组件的名字, 也就是子组件的name属性
  }
}
</script>

<style lang="stylus" scoped>
  .content-box {
    height: 45rem;
  }
</style>